<template>
  <div class="history-record">
    <div class="header" @click="toRecordList">
      <div class="title">历史记录</div>
      <div class="more" v-if="showMore">
        <div class="more-text">更多</div>
        <div class="arrow-svg">
          <SvgIcon
            svg-name="arrow"
            color="rgba(0, 0, 0, 0.5)"
            class-name="arrow-svg"
          />
        </div>
      </div>
    </div>
    <div class="body">
      <div class="title">{{ props.week }}</div>
      <div class="record">
        <div class="items">
          <div class="hairline" v-for="item in props.list" :key="item.id">
            <div class="hairline_title">
              <div
                class="score"
                :style="{ backgroundColor: scoreBgColor(item.score) }"
              >
                {{ item.score }}
              </div>
              <div class="block">
                <div class="time">{{ item.time }}</div>
                <div class="description">刷牙时长</div>
              </div>
              <div class="duration">{{ item.duration }}</div>
            </div>
            <div class="hairline_cicle-container"></div>
            <div class="hairline_line"></div>
          </div>
          <div class="no-data" v-if="list.length === 0">暂无历史记录~</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from 'vue'
import { sys } from '../../utils/sys'
import { useRouter } from 'vue-router'

const router = useRouter()

/**
 * 得分1-60，为橙⾊
 * 得分61-80，为蓝⾊
 * 得分81-100，为绿⾊
 */
const props = defineProps({
  list: Array,
  showMore: {
    type: Boolean,
    default: true
  },
  week: String
})

const scoreBgColor = scores => {
  const score = Number(scores)
  const { SCORE_BG_1, SCORE_BG_2, SCORE_BG_3 } = sys.color
  if (score >= 81) {
    return SCORE_BG_1
  } else if (score >= 61 && score <= 80) {
    return SCORE_BG_2
  } else {
    return SCORE_BG_3
  }
}

const toRecordList = () => {
  router.push({ path: '/historyRecord', query: { random: Math.random() } })
}
</script>

<style lang="less" scoped>
@import url(./history-record.less);
</style>
